<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="../js/wap_meta.js" ></script>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.1.js" ></script>
		<link rel="stylesheet" href="../css/base.css" />
		<script type="text/javascript" src="../js/link.js" ></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			font-family: "微软雅黑";
		}
		
		body {
			background: #f0f0f0;
		}
		.title{
			position: fixed;
			width: 750px;
			height: 100px;
			background: #fff;
			z-index: 1;
		}
		.title p{
			width: 750px;
			text-align: center;
			font-size: 34px;
			color: #004591;
			padding-top: 26px;
		}
		.back{
			position: absolute;
			top: 30px;
			left: 30px;
		}
		.content{
			position: fixed;
			top:100px;
			z-index: 1;
			/*padding-bottom: 100px;*/
		}
		.contentbg{
			background: #999999;
			padding-bottom: 1px;
		}
		.bar{
			position: relative;
			height: 90px;
		}
		.bar p{
			padding-top: 15px;
			padding-left: 30px;
			font-size: 32px;
			color: #333333;
		}
		.right{
			position: absolute;
			left: 240px;
			top: 15px;
		}
		.right input{
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
			width: 500px;
		}
		.line{
			position: absolute;
			left: 30px;
			width: 720px;
			top: 78px;
			height: 1px;
			background: #d0d0d0;
		}
		.sanjiao{
			position: absolute;
			left: 680px;
			top: 30px;
		}
		.comform1{
			position: absolute;
			left: 30px;
			top: 1050px;
			padding-bottom: 100px;
		}
		.comform2{
			position: absolute;
			left: 30px;
			bottom: 100px;
		}
		select{
			width: 510px;
			height: 44px;
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
		}
		
		.selectBar{
			position: fixed;
			top: 100px;
			width: 750px;
			padding-top: 1px;
			padding-bottom: 1px;
			background: #999999;
			z-index: 1;
		}
		.selection{
			float: left;
			position: relative;
			width: 375px;
			height: 78px;
		}
		.selection p{
			width: 375px;
			text-align: center;
			font-size: 32px;
			padding-top: 18px;
		}
		.blue{
			background: #0b52a1;
		}
		.selected{
			background: #fff;
		}
		.selected p{
			color: #0b52a1;
		}
		.blue p{
			color: #fff;
		}
		.right1{
			position: absolute;
			left: 240px;
			top: 15px;
			width: 500px;
		}
		.right1 input{
			font-size: 32px;
			color: #999999;
		}
		input[type="radio"] {
			margin: 3px 3px 0px 5px;
			display: none;
			height: 360px;
			width: 360px;
		}
		label {
			height: 36px;
			position: relative;
			padding-left: 40px;
			padding-top: 8px;
			padding-bottom: 7px;
			cursor: pointer;
			background: url(../img/apply/select.png) no-repeat left bottom;
		}
		label.checked {
			background-position: left top;
		}
		.content2Bar{
			position: relative;
			width: 750px;
			height: 90px;
			background: #fff;
			/*margin-bottom: 1px;*/
		}
		.searchBar{
			float: left;
			margin-left: 20px;
			padding-top: 14px;
		}
		.comBtn{
			margin-left: 570px;
			padding-top: 14px;
		}
		.searchTxt{
			position: absolute;
			top: 22px;
			left: 80px;
			font-size: 28px;
			width: 450px;
			height: 40px;
			border: 0;
			background: 0;
		}
		.teltip{
			position: absolute;
			top: 22px;
			left: 20px;
			font-size: 28px;
			width: 450px;
		}
		.tel{
			position: absolute;
			top: 22px;
			left: 270px;
			font-size: 28px;
			width: 450px;
			color: #0B52A1;
		}
		.telprice{
			position: absolute;
			top: 20px;
			left: 560px;
			font-size: 34px;
			width: 450px;
			color: #0B52A1;
		}
		.tips{
			padding-top: 25px;
		}
		.tips p{
			padding-left: 25px;
			font-size: 24px;
			color: #333;
			width: 700px;
			line-height: 40px;
		}
		.check2{
			margin-left: 20px;
			margin-top: 100px;
		}
		.bar{
			margin-bottom: 1px;
		}
		.choose{
			position: relative;
			width: 750px;
			height: 80px;
		}
		.chooseBar{
			position: relative;
			float: left;
			width: 250px;
			height: 80px;
			background: #fff;
		}
		.chooseBarmid{
			float: left;
			width: 248px;
			height: 80px;
			background: #fff;
			margin-left: 1px;
			margin-right: 1px;
		}
		.chooseBar p{
			float: left;
			position: relative;
			width: 150px;
			left: 10px;
			text-align: right;
			font-size: 32px;
			color: #333;
			padding-top: 14px;
		}
		.chooseBar img{
			float: left;
			position: relative;
			width: 22px;
			top: 30px;
			left: 30px;
		}
		.chooseBarmid p{
			float: left;
			position: relative;
			width: 150px;
			text-align: right;
			font-size: 32px;
			color: #333;
			padding-top: 14px;
		}
		.chooseBarmid img{
			float: left;
			position: relative;
			width: 22px;
			top: 30px;
			left: 30px;
		}
		.listTitle{
			position: relative;
			width: 750px;
			height: 81px;
			background: #fff;
		}
		.listTitle p{
			float: left;
			width: 250px;
			text-align: center;
			font-size: 32px;
			color: #333;
			padding-top: 14px;
		}
		.listLine{
			position: relative;
			left: 20px;
			width: 710px;
			top: 80px;
			height: 1px;
			background: #999999;
		}
		.list{
			padding-top: 180px;
			/*padding-top: 433px;*/
			width: 750px;
			z-index: 0;
		}
		.numList{
			position: relative;
			width: 750px;
		}
		.listBar{
			float: left;
			width: 750px;
			height: 81px;
			background: #fff;
		}
		.listBar img{
			float: left;
			position: relative;
			top: 10px;
			left: 80px;
			width: 200px;
		}
		.num{
			float: left;
			position: relative;
			top: 20px;
			left: 20px;
			width: 240px;
			font-size: 32px;
			color: #333;
		}
		.price{
			float: left;
			position: relative;
			top: 20px;
			left: 30px;
			width: 200px;
			font-size: 32px;
			color: #999;
		}
	</style>
	<body>
		<div class="title">
			<p>号码超市</p>
			<img class="back" src="../img/activate/back.png" />
		</div>
		<div class="selectBar">
			<div class="selection blue" id="sel1" sel="1">
				<p>自助选号</p>
			</div>
			<div class="selection selected" id="sel2" sel="0">
				<p>个性选号</p>
			</div>
		</div>
		<div class="content" id="form1">
			<div class="contentbg">
				<div class="content2Bar bar">
					<input class="searchTxt" id="search1Txt" type="text" name="number" placeholder="请输入您想要的9位数字" />
					<img class="searchBar" src="../img/apply/searchBar.png" />
					<img class="comBtn" src="../img/apply/searchBtn.png" />
				</div>
				<div class="choose">
					<div class="chooseBar">
						<p>分类</p>
						<img src="../img/apply/littlesanjiao.png" />
					</div>
					<div class="chooseBarmid">
						<p>排序</p>
						<img src="../img/apply/littlesanjiao.png" />
					</div>
					<div class="chooseBar">
						<p>热门</p>
						<img src="../img/apply/littlesanjiao.png" />
					</div>
				</div>
			</div>
			<div class="listTitle">
				<p>号码</p>
				<p>公益捐赠</p>
				<p>操作</p>
				<div class="listLine"></div>
			</div>
		</div>
		
		<div class="list">
			<div class="numList">
				<div class="listBar">
					<div class="listLine"></div>
					<div class="num">随机号</div>
					<div class="price">￥0</div>
					<img class="cho" src="../img/apply/selectPay.png" id="btn1"/>
				</div>
				<!--<div class="listBar">
					<div class="listLine"></div>
					<div class="num">599465284</div>
					<div class="price">￥200</div>
					<img class="cho" src="../img/apply/selectPay.png"/>
				</div>
				<div class="listBar">
					<div class="listLine"></div>
					<div class="num">1</div>
					<div class="price">2</div>
					<img class="cho" src="../img/apply/selectPay.png"/>
				</div>-->
			</div>
		</div>
		<div class="content" id="form2">
			<div class="contentbg">
				<div class="content2Bar bar">
					<input class="searchTxt" id="search2Txt" type="text" name="number" placeholder="请输入您想要的9位数字" />
					<img class="searchBar" src="../img/apply/searchBar.png" />
					<img class="comBtn" src="../img/apply/com.png" />
				</div>
				<div class="content2Bar">
					<div class="teltip">您已选择的号码是：</div>
					<div class="tel">163465987</div>
					<div class="telprice">￥520</div>
				</div>
			</div>
			<div class="tips">
				<p><font color='#ff0000'>注：</font>号码选取规则</p>
				<p>1、输入9位数输入9位数输入9位数输入9位数输入9位数输入9位数</p>
				<p>
				2、输入9位数输入9位数输入9位数输入9位数
				</p>
				<p>
					
				3、输入9位数输入9位数
				</p>
			</div>
			<img class="check2" src="../img/apply/check.png" />
		</div>
		<!--<img id="comform" class="comform1" src="../img/activate/next.png" />-->
		<script>
			$(".cho").click(function(){
//				alert(this.id)
//				document.location = "pay.html";
				document.location = "appointment.html";
				
			})
			$(".selectBar").hide();
			$(".contentbg").hide();
			$("#form2").hide();
//			$(".list").hide();
			$("#sel1").click(function(){
				if($("#sel1").attr("sel") == "0"){
					$("#sel1").attr("sel","1");
					$("#sel2").attr("sel","0");
					$("#sel1").addClass("blue");
					$("#sel1").removeClass("selected");
					$("#sel2").addClass("selected");
					$("#sel2").removeClass("blue");
					$("#form1").show();
					$(".list").show();
					$("#form2").hide();
				}
			})
			$("#sel2").click(function(){
				alert("开发中")
				return;
				if($("#sel2").attr("sel") == "0"){
					$("#sel2").attr("sel","1");
					$("#sel1").attr("sel","0");
					$("#sel2").addClass("blue");
					$("#sel2").removeClass("selected");
					$("#sel1").addClass("selected");
					$("#sel1").removeClass("blue");
					$("#form2").show();
					$("#form1").hide();
					$(".list").hide();
				}
			})
			$(".check2").click(function(){
//				alert("asdf")
				document.location = "pay.html";
//				alert(serializeObject($('#searchForm')))
//				alert($("#searchForm [name='number']").val())
			})
			$(".back").click(function(){
				javascript:history.go(-1);
			})
			
//			function updateSave(){
//				var url = "/admin/members/relet.do";
//				if ($('#relet-window-form').form('validate')) {
//					$.submitPost(url, serializeObject($('#relet-window-form')), function(result) {
//						if (result.success) {
//							$.messager.alert('提示', result.msg, 'info');
//							$('#relet-window').window('close');
//							$('#grid').datagrid('reload');
//						} else {
//							$.messager.alert('提示', result.msg, 'error');
//						}
//					}, 'json');
//				}
//			}
//			
//			$.post("/admin/coupon/type/selectType.do",{},function(data){
//				
//			},'json')
		</script>
	</body>
</html>
